﻿
@{
    ViewBag.Title = "About";
}

<div id="content">
    <!-- #content -->
    <!-- SECTION START TOPBAR -->
    <section id="topbar">
        <div class="container">
            <div class="row">
                <!-- .row start -->
                <div class="col-md-6">
                    <!-- col-md-6 start here -->
                    <h1>About us</h1>
                </div>
                <!-- col-md-6 end here -->
                <div class="col-md-6 text-right">
                    <!-- col-md-6 start here -->
                    <ul class="breadcrumb">
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="#">Pages</a>
                        </li>
                        <li class="active">About us</li>
                    </ul>
                </div>
                <!-- col-md-6 end here -->
            </div>
            <!-- / .row -->
        </div>
    </section>
    <!-- SECTION END -->
    <!-- SECTION START -->
    <section class="services-preview white-bg mb10 pt10">
        <div class="container">
            <div class="row service-panel no-icons">
                <!-- .row start -->
                <div class="col-md-4">
                    <!-- col-md-4 start here -->
                    <div class="service-panel-heading">
                        <h4>Why choose us</h4>
                    </div>
                    <div class="service-panel-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quaerat animi illo minus quod culpa deleniti porro magnam. Possimus earum, porro assumenda minima consequatur!</p>
                    </div>
                </div>
                <!-- col-md-4 end here -->
                <div class="col-md-4">
                    <!-- col-md-4 start here -->
                    <div class="service-panel-heading">
                        <h4>What we do</h4>
                    </div>
                    <div class="service-panel-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quaerat animi illo minus quod culpa deleniti porro magnam. Possimus earum, porro assumenda minima consequatur!</p>
                    </div>
                </div>
                <!-- col-md-4 end here -->
                <div class="col-md-4">
                    <!-- col-md-4 start here -->
                    <div class="service-panel-heading">
                        <h4>Our mission</h4>
                    </div>
                    <div class="service-panel-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem quaerat animi illo minus quod culpa deleniti porro magnam. Possimus earum, porro assumenda minima consequatur!</p>
                    </div>
                </div>
                <!-- col-md-4 end here -->
            </div>
            <!-- / .row -->
        </div>
    </section>
    <!-- / SECTION END -->
    <!-- SECTION START -->
    <section class="gray-lighter-bg mb20 pt20 pb20">
        <div class="container">
            <!-- .container -->
            <div class="row">
                <!-- .row start -->
                <div class="col-md-3 col-sm-6 company-stats">
                    <!-- col-md-3 start here -->
                    <i class="l-basic-world"></i>
                    <div class="stats-number color-red" data-from="0" data-to="564">15689</div>
                    <h4>Worldwide clients</h4>
                </div>
                <!-- col-md-3 end here -->
                <div class="col-md-3 col-sm-6 company-stats">
                    <!-- col-md-3 start here -->
                    <i class="l-basic-life-buoy"></i>
                    <div class="stats-number color-red" data-from="0" data-to="3564">0</div>
                    <h4>Support tickets answered</h4>
                </div>
                <!-- col-md-3 end here -->
                <div class="col-md-3 col-sm-6 company-stats">
                    <!-- col-md-3 start here -->
                    <i class="l-basic-hammer"></i>
                    <div class="stats-number color-red" data-from="0" data-to="564">0</div>
                    <h4>Custom projects done</h4>
                </div>
                <!-- col-md-3 end here -->
                <div class="col-md-3 col-sm-6 company-stats">
                    <!-- col-md-3 start here -->
                    <i class="l-basic-target"></i>
                    <div class="stats-number color-red" data-from="0" data-to="165">0</div>
                    <h4>Company goals complete</h4>
                </div>
                <!-- col-md-3 end here -->
            </div>
            <!-- / .row -->
        </div>
        <!-- / .container -->
    </section>
    <!-- / SECTION END -->
    <!-- SECTION START -->
    <section class="staff-preview white-bg mb30">
        <div class="container">
            <div class="row">
                <div class="col-md-4 img-holder" data-mh="staff-large">
                    <!-- col-md-5 start here -->
                    <div class="bg-img-holder">
                        <img src="~/img/staff/user1.jpg" alt="George Lowe">
                    </div>
                </div>
                <!-- col-md-5 end here -->
                <div class="col-md-8 pl50 pt25 pr50 pb25" data-mh="staff-large">
                    <!-- col-md-7 start here -->
                    <div class="heading mb30">
                        <h3>George Lowe</h3>
                    </div>
                    <div class="row">
                        <!-- .row start -->
                        <div class="col-md-6 staff-info">
                            <!-- col-md-6 start here -->
                            <h4 class="color-red mtm5">CEO of Dynamic ltd</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                consequat.
                            </p>
                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <div class="social-buttons mt20 clearfix">
                                <a href="#" class="btn btn-social-icon btn-facebook pull-left mr10 ">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a href="#" class="btn btn-social-icon btn-twitter pull-left mr10">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a href="#" class="btn btn-social-icon btn-instagram pull-left mr10">
                                    <i class="fa fa-instagram"></i>
                                </a>
                                <a href="#" class="btn btn-social-icon btn-github pull-left">
                                    <i class="fa fa-github"></i>
                                </a>
                            </div>
                        </div>
                        <!-- col-md-6 end here -->
                        <div class="col-md-6 staff-skills">
                            <!-- col-md-6 start here -->
                            <ul class="list-unstyled">
                                <li>
                                    <span><strong>HTML5</strong></span>
                                    <div class="progress animated-bar flat mt5 mb20">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="98"></div>
                                    </div>
                                </li>
                                <li>
                                    <span><strong>CSS3</strong></span>
                                    <div class="progress animated-bar flat mt5 mb20">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="90"></div>
                                    </div>
                                </li>
                                <li>
                                    <span><strong>LESS</strong></span>
                                    <div class="progress animated-bar flat mt5 mb20">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="75"></div>
                                    </div>
                                </li>
                                <li>
                                    <span><strong>JQuery</strong></span>
                                    <div class="progress animated-bar flat mt5 mb20">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal="82"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- col-md-6 end here -->
                    </div>
                    <!-- / .row -->
                </div>
                <!-- col-md-7 end here -->
            </div>
            <!-- / .row -->
        </div>
    </section>
    <!-- / SECTION END -->
    <!-- SECTION START -->
    <section class="staff-preview gray-lighter-bg">
        <div class="container">
            <div class="row">
                <!-- .row start -->
                <div class="col-md-4">
                    <!-- col-md-4 start here -->
                    <div class="heading mt30 mb30">
                        <h3>Clarence Hill</h3>
                    </div>
                    <div class="img-holder workers">
                        <div class="bg-img-holder">
                            <img src="~/img/staff/user2.jpg" alt="Clarence Hill">
                        </div>
                    </div>
                    <h4 class="color-red mt20">Head Programmer</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                    <div class="social-buttons mt20 mb20 clearfix">
                        <a href="#" class="btn btn-social-icon btn-facebook pull-left mr10 ">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-twitter pull-left mr10">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-instagram pull-left mr10">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-github pull-left">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                <!-- col-md-4 end here -->
                <div class="col-md-4">
                    <!-- col-md-4 start here -->
                    <div class="heading mt30 mb30">
                        <h3>Marion Bishop</h3>
                    </div>
                    <div class="img-holder workers">
                        <div class="bg-img-holder">
                            <img src="~/img/staff/user3.jpg" alt="Marion Bishop">
                        </div>
                    </div>
                    <h4 class="color-red mt20">Creative Director</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                    <div class="social-buttons mt20 mb20 clearfix">
                        <a href="#" class="btn btn-social-icon btn-facebook pull-left mr10 ">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-twitter pull-left mr10">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-instagram pull-left mr10">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-github pull-left">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                <!-- col-md-4 end here -->
                <div class="col-md-4">
                    <!-- col-md-4 start here -->
                    <div class="heading mt30 mb30">
                        <h3>Tonya Douglas</h3>
                    </div>
                    <div class="img-holder workers">
                        <div class="bg-img-holder">
                            <img src="~/img/staff/user4.jpg" alt="Tonya Douglas">
                        </div>
                    </div>
                    <h4 class="color-red mt20">SEO Expert</h4>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </p>
                    <div class="social-buttons mt20 mb20 clearfix">
                        <a href="#" class="btn btn-social-icon btn-facebook pull-left mr10 ">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-twitter pull-left mr10">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-instagram pull-left mr10">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="btn btn-social-icon btn-github pull-left">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                <!-- col-md-4 end here -->
            </div>
            <!-- / .row -->
        </div>
    </section>
    <!-- / SECTION END -->
    <!-- SECTION START CLIENTS -->
    <section class="testimonials-preview white-bg mb10 pt10">
        <div class="container">
            <div class="row testimonials text-center">
                <!-- .row start -->
                <div class="col-md-6 col-md-offset-3">
                    <!-- col-md-6 start here -->
                    <div class="heading mt20 mb30 text-center">
                        <h3>What clients say</h3>
                    </div>
                    <div id="testimonials-carousel" class="owl-carousel mb20">
                        <div class="item">
                            <div class="user-avatar">
                                <img class="lazyOwl" data-src="~/img/users/1.jpg" alt="Tracy">
                            </div>
                            <div class="user-quote">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni explicabo accusamus qui quasi officia totam exercitationem tempore perferendis necessitatibus inventore soluta, delectus ipsum possimus fuga nesciunt
                                    quo iusto reprehenderit rerum.
                                </p>
                            </div>
                            <div class="user-name">
                                <h4>Tracy Williams</h4>
                                <span>CEO of United Colors</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="user-avatar">
                                <img class="lazyOwl" data-src="~/img/users/2.jpg" alt="Kristin">
                            </div>
                            <div class="user-quote">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni explicabo accusamus qui quasi officia totam exercitationem tempore perferendis necessitatibus inventore soluta, delectus ipsum possimus fuga nesciunt
                                    quo iusto reprehenderit rerum.
                                </p>
                            </div>
                            <div class="user-name">
                                <h4>Kristin Obrien</h4>
                                <span>SEO specialist</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="user-avatar">
                                <img class="lazyOwl" data-src="~/img/users/3.jpg" alt="Vincent">
                            </div>
                            <div class="user-quote">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni explicabo accusamus qui quasi officia totam exercitationem tempore perferendis necessitatibus inventore soluta, delectus ipsum possimus fuga nesciunt
                                    quo iusto reprehenderit rerum.
                                </p>
                            </div>
                            <div class="user-name">
                                <h4>Vincent Riley</h4>
                                <span>PHP developer</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="user-avatar">
                                <img class="lazyOwl" data-src="~/img/users/4.jpg" alt="Gorgon">
                            </div>
                            <div class="user-quote">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni explicabo accusamus qui quasi officia totam exercitationem tempore perferendis necessitatibus inventore soluta, delectus ipsum possimus fuga nesciunt
                                    quo iusto reprehenderit rerum.
                                </p>
                            </div>
                            <div class="user-name">
                                <h4>Gordon Black</h4>
                                <span>MongoDb developer</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- col-md-6 end here -->
            </div>
            <!-- / .row -->
        </div>
    </section>
    <!-- / SECTION END -->
</div>
<!-- / #content -->
@section JavascriptSection{
<script src="~/js/pages/about.js"></script>

}

